<template>
  <div class="filter-box" :class="{ down: open }">
    <div
      class="filter-btn"
      :class="{ active: showTitle }"
      @click="open = !open"
    >
      {{ showTitle || placeholder }}
      <img
        src="../../assets/down.svg"
        onload="SVGInject(this)"
        class="down-icon"
      />
    </div>
    <div class="bg" @click="open = false" v-show="open"></div>
    <transition name="van-fade">
      <div
        class="mask"
        @click="open = false"
        :style="{ top: top + 'px' }"
        v-show="open"
      ></div>
    </transition>
    <collapse-transition>
      <div class="downmenu" v-show="open" :style="{ top: top + 'px' }">
        <div class="box">
          <vue-custom-scrollbar class="scroll-area" :settings="settings">
            <div class="select" v-for="(val, i) in value" :key="i">
              <div class="tit">·{{ val.title }}</div>
              <div class="item-list">
                <div
                  class="item"
                  :class="{
                    active: isSelect(i, index),
                    multi: val.mode == 'multi',
                  }"
                  v-for="(item, index) in val.data"
                  :key="index"
                  @click="selectItem(i, index)"
                >
                  {{ item.title }}
                </div>
              </div>
            </div>
          </vue-custom-scrollbar>
        </div>
        <div class="btn">
          <div class="reset" @click="reset">重置</div>
          <div class="enter" @click="enter">确认</div>
        </div>
      </div>
    </collapse-transition>
  </div>
</template>

<script>
export default {
  props: {
    value: Array,
    active: {
      type: Boolean,
      default: () => false, // multi
    },
    placeholder: {
      type: String,
      default: () => "筛选",
    },
  },
  computed: {
    showTitle() {
      let text = [];
      this.value.forEach((item) => {
        if (item.mode == "single") {
          item.data.some((sub) => {
            if (sub.value === item.value) {
              text.push(sub.title);
              return true;
            }
          });
        } else {
          item.data.forEach((sub) => {
            let val = [];
            if (!Array.isArray(item.value)) val = [item.value];
            else val = item.value;
            if (val.indexOf(sub.value) !== -1) {
              text.push(sub.title);
            }
          });
        }
      });
      return text.join(",");
    },
  },
  model: {
    prop: "value",
    event: "change",
  },
  data() {
    return {
      open: false,
      top: 0,
      locaVal: null,
      settings: {
        suppressScrollY: false,
        suppressScrollX: true,
        wheelPropagation: false,
      },
    };
  },
  watch: {
    open() {
      window.scroll.lockScroll();
      if (this.open) {
        this.top = this.$el.clientHeight + this.$el.getBoundingClientRect().top;
      }
    },
  },
  created() {
    this.locaVal = JSON.parse(JSON.stringify(this.value));
  },
  methods: {
    isSelect(i, index) {
      let value = JSON.parse(JSON.stringify(this.locaVal));
      if (value[i].mode == "single") {
        return value[i].value == value[i].data[index].value;
      } else {
        let val = [];
        if (!Array.isArray(value[i].value)) val = [value[i].value];
        else val = value[i].value;
        return val.indexOf(value[i].data[index].value) !== -1;
      }
    },
    selectItem(i, index) {
      // 判断是否单选
      let value = JSON.parse(JSON.stringify(this.locaVal));
      if (value[i].mode == "single") {
        if (value[i].value == value[i].data[index].value) {
          value[i].value = null;
        } else {
          value[i].value = value[i].data[index].value;
        }
      } else {
        let val = [];
        if (!Array.isArray(value[i].value)) val = [value[i].value];
        else val = value[i].value;
        if (val.indexOf(value[i].data[index].value) === -1) {
          val.push(value[i].data[index].value);
        } else {
          val.splice(val.indexOf(value[i].data[index].value), 1);
        }
        value[i].value = val;
      }
      Object.assign(this.locaVal[i], value[i]);
    },
    enter() {
      this.$emit("change", JSON.parse(JSON.stringify(this.locaVal)));
      this.open = false;
      this.$emit("update");
    },
    reset() {
      this.locaVal.forEach((item, index) => {
        this.$set(this.locaVal[index], "value", null);
      });
      this.enter();
    },
  },
};
</script>

<style lang="scss" scoped>
.filter-box {
  display: inline-block;
  width: 0.6rem;
  height: 0.3rem;
  border-radius: 4px;
  font-size: 0.12rem;
  line-height: 0.28rem;
  text-align: center;
  position: relative;
  cursor: pointer;
  &.down {
    .filter-btn {
      z-index: 2;
      .down-icon {
        transform: rotate(0deg);
      }
    }
  }
  .filter-btn {
    position: absolute;
    top: 0;
    left: 0;
    border: 1px solid #ebebeb;
    width: 100%;
    height: 100%;
    border-radius: 4px;
    box-sizing: border-box;
    background: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 0 0 0.07rem;
    &.active {
      border: 1px solid #ff8a69;
      color: #ff8a69;
      .down-icon {
        ::v-deep {
          polygon {
            fill: #ff8a69;
            stroke: #ff8a69;
          }
        }
      }
    }
    .down-icon {
      display: inline-block;
      position: relative;
      top: -0.02rem;
      margin-left: 0.02rem;
      width: 0.06rem;
      height: 0.04rem;
      transform: rotate(180deg);
      transition: all 0.3s;
    }
  }
  .bg {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0);
    z-index: 1;
  }
  .mask {
    position: fixed;
    width: 100%;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 2;
  }
  .downmenu {
    position: fixed;
    padding-top: 0.15rem;
    background: #fff;
    width: 100%;
    max-width: 500px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    .box {
      margin: 0 0 0.15rem 0.15rem;
      height: 1.93rem;
      overflow: hidden;
      border-top: 1px solid #ebebeb;
      .scroll-area {
        height: 100%;
        padding-right: 0.15rem;
        ::v-deep {
          .ps__rail-y {
            width: 4px;
            background: none !important;
            opacity: 1 !important;
            .ps__thumb-y {
              width: 4px;
            }
          }
        }
      }
      .select {
        .tit {
          width: 100%;
          text-align: left;
          padding: 0.12rem 0 0.08rem 0;
          font-size: 0.12rem;
          font-weight: 400;
          color: #333333;
        }
        .item-list {
          text-align: left;
          .item {
            width: 0.75rem;
            height: 0.28rem;
            border-radius: 0.05rem;
            margin-bottom: 0.08rem;
            background: #f2f2f2;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            box-sizing: border-box;
            border: 1px solid f2f2f2;
            font-size: 0.12rem;
            color: #333333;
            margin-right: 0.1rem;
            &:nth-child(4n) {
              margin-right: 0;
            }
            &.active {
              background: #fff;
              &.multi {
                background-image: url(../../assets/right_close.svg);
                background-repeat: no-repeat;
                background-position: right top;
              }
              border: 1px solid #ff8a69;
            }
          }
        }
      }
    }
    .btn {
      height: 0.48rem;
      width: 100%;
      display: flex;
      .reset {
        width: 1.2rem;
        height: 100%;
        border-top: 1px solid #ebebeb;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 0.14rem;
        font-weight: 400;
        color: #333333;
      }
      .enter {
        flex: 1;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 0.14rem;
        background: #ff8a69;
        font-weight: 400;
        color: #fff;
      }
    }
  }
}
</style>
